<template>
  <div style="margin-top:30px;">
    <van-pull-refresh
      v-model="refreshing"
      disabled
      @refresh="onRefresh"
      class="refresh-content"
    >
      <van-list
        class="content-list"
        v-model:loading="loading"
        :finished="finished"
        @load="loadMore"
        :immediate-check="false"
      >
        <div
          class="user-card cardJh"
          v-for="(item,index) in card"
          :key="index"
        >
          <div class="user-card-item">
            <div class="left">
              <div>
                <img
                  :src="item.head_img"
                  class="avatar"
                >
              </div>
              <div class="info">
                <p class="position color1 fontBold content3">
                  {{ item.username }}
                </p>
                <p
                  class="company van-ellipsis color3 font400 content3"
                >
                  {{ item.company }}
                </p>
              </div>
            </div>
          </div>
          <div class="flex justify_between align_center">
            <div
              class="frist font400 color4 content2"
              @click.stop="handleReject(item.id)"
            >
              拒绝
            </div>
            <div
              class="last font400 color4 content2"
              @click.stop="handleAgree(item.id)"
            >
              同意
            </div>
          </div>
        </div>
        <div class="divider">
          <van-divider
            :style="{ color: '#454757', borderColor: '#454757', padding: '0 120px' }"
            v-if=" applyList.list != undefined && applyList.list.length !== 0"
          >
            已处理
          </van-divider>
          <div class="user-card">
            <div
              class="user-card-item"
              v-for="(item,index) in applyList.list"
              :key="index"
            >
              <div
                class="left"
                @click="goCard(item.user_id)"
              >
                <div>
                  <img
                    :src="item.head_img"
                    class="avatar"
                  >
                </div>
                <div class="info">
                  <p class="position color1 fontBold content3">
                    {{ item.username }}
                  </p>
                  <p
                    class="company van-ellipsis color3 font400 content3"
                  >
                    {{ item.company }}
                  </p>
                </div>
              </div>
              <div>
                <svg
                  @click="phone(item.phone)"
                  class="excellent"
                  aria-hidden="true"
                >
                  <use xlink:href="#icon-dianhua" />
                </svg>
              </div>
              <!-- <van-row
                class="ptop"
                v-if="item.is_exchange === '0'"
              >
                <van-col span="12">
                  <van-button
                    block
                    class="frist"
                    size="small"
                    @click.stop="handleReject()"
                  >
                    拒绝交换
                  </van-button>
                </van-col>
                <van-col span="12">
                  <van-button
                    block
                    class="last"
                    size="small"
                    type="danger"
                    @click.stop="handleAgree()"
                  >
                    同意交换
                  </van-button>
                </van-col>
              </van-row> -->
            </div>
          </div>
        </div>
        <!-- <no-data v-if="applyList.list.length == 0 && card.length == 0" /> -->
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Toast, Dialog } from 'vant'
import { useRouter } from 'vue-router'
import { getexchangeing, getexchangehandles, userCardAdop, userCardRefuse } from '@/api'
// const NoData = defineAsyncComponent(() => import('@/components/NoData/index.vue'))
const router = useRouter()
const loading: any = ref(false)
const finished: any = ref(false)
const refreshing: any = ref(false)
const card: any = ref([])
const applyList: any = ref([])
const form: any = ref({
  page: 1,
  pageSize: 10
})

const getData = async () => {
  applyList.value = await getexchangehandles()
}
getData()

const onRefresh = async () => {
  form.value.page = 1
  const list = await loadDemandList()
  card.value = list
  refreshing.value = false
}

const loadMore = async () => {
  form.value.page = form.value.page + 1
  const list = await loadDemandList()
  card.value = [...card.value, ...list]
  loading.value = false
}

const loadDemandList = async () => {
  // 异步更新数据
  const res: any =
        (await getexchangeing({ ...form.value })) || []
  if (!Array.isArray(res) && typeof res.list === 'object') {
    const keys: any = Object.keys(res.list)
    const newRes: any = keys.map((k: any) => res.list[k])
    finished.value = newRes.length < form.value.pageSize
    return newRes
  }

  finished.value = res.list.length < form.value.pageSize
  return res
}

onRefresh()

const handleReject = async (id:any) => {
  try {
    await userCardRefuse({ card_id: id })
    Dialog.alert({
      message: '您的交换名片申请已拒绝',
      confirmButtonColor: '#FF7A1F'
    }).then(() => {
    // on close
      getData()
      onRefresh()
    })
  } catch (error:any) {
    Toast(error.message)
  }
}
const handleAgree = async (id:any) => {
  try {
    await userCardAdop({ card_id: id })
    Dialog.alert({
      message: '您的交换名片已通过',
      confirmButtonColor: '#FF7A1F'
    }).then(() => {
      getData()
      onRefresh()
    })
  } catch (error:any) {
    Toast(error.message)
  }
}

const phone = async (i:any) => {
  window.location.href = 'tel://' + i
}

const goCard = async (id: any) => {
  router.push({ path: '/square/contacts', query: { id: id } })
}

</script>

<style lang="less" scoped>
.user-card {
    .user-card-item {
        width: 100%;
        background: #ffffff;
        border-radius: 10px;
        margin: 10px auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        padding: 15px 0;
        .excellent {
            width: 25px;
            height: 25px;
            margin-right: 14px;
        }

        .left {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-left: 14px;
            .info {
                margin-left: 14px;
            }
        }
        .avatar {
            width: 50px;
            height: 50px;
            border-radius: 5px;
        }
        .company {
            margin-top: 15px;
        }
    }
}

.cardJh {
    background: #ffffff;
    padding: 15px 0;
    margin-bottom: 20px;

    .user-card-item {
        padding: 0;
        margin-bottom: 20px;
    }
    .frist {
        width: 149px;
        height: 44px;
        background: #85898c;
        border-radius: 5px;
        text-align: center;
        line-height: 44px;
        margin-left: 15px;
    }
    .last {
        width: 149px;
        height: 44px;
        background: #ff7a1f;
        border-radius: 5px;
        text-align: center;
        line-height: 44px;
        margin-right: 15px;
    }
}
.divider {
    margin-top: 80px;
}
@media (min-width: 750px) {
  .user-card {
    .user-card-item {
        width: 100%;
        background: #ffffff;
        border-radius: 10px;
        margin: 10px auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        padding: 15px 0;
        .excellent {
            width: 25px;
            height: 25px;
            margin-right: 14px;
        }

        .left {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-left: 14px;
            .info {
                margin-left: 14px;
            }
        }
        .avatar {
            width: 50px;
            height: 50px;
            border-radius: 5px;
        }
        .company {
            margin-top: 15px;
        }
    }
}

.cardJh {
    background: #ffffff;
    padding: 15px 0;
    margin-bottom: 20px;

    .user-card-item {
        padding: 0;
        margin-bottom: 20px;
    }
    .frist {
        width: 149px;
        height: 44px;
        background: #85898c;
        border-radius: 5px;
        text-align: center;
        line-height: 44px;
        margin-left: 15px;
    }
    .last {
        width: 149px;
        height: 44px;
        background: #ff7a1f;
        border-radius: 5px;
        text-align: center;
        line-height: 44px;
        margin-right: 15px;
    }
}
.divider {
    margin-top: 80px;
}
}
</style>
